<template>
    <div class="top">
        <span>用户资料</span>
    </div>
    <div class="profile">
        <div class="form-user">
            <div class="title"> 基本信息 </div>
            <el-form label-width="100px" label-position="left">
                <el-form-item label="邮箱: ">
                    <el-input v-model="user.userEmail" />
                </el-form-item>
                <el-form-item label="用户名：">
                    <el-input v-model="user.userName" />
                </el-form-item>
                <el-form-item label="职业：">
                    <el-input v-model="user.career" />
                </el-form-item>
                <el-form-item label="个人介绍：">
                    <el-input
                        v-model="user.remark"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea"
                        placeholder="请填写个人兴趣 座右铭"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editUser"> 提交 </el-button>
                    <el-button> 取消 </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="avatar">
            <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="uploadCover"
            >
                <el-avatar v-if="url" alt="点击上传头像" class="avatar" :src="url" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="description black"><span>上传头像</span></div>
            <div class="description"><span>格式：支持JPG、PNG、JPEG</span></div>
            <div class="description"><span>大小：5M以内</span></div>
        </div>
    </div>
</template>
<script lang="ts">
    import { defineComponent } from 'vue';
    import { Plus } from '@element-plus/icons-vue';

    export default defineComponent({
        name: 'SettingUserInfo',
        components: { Plus }
    });
</script>

<script lang="ts" setup>
    import { useUserStore } from '@/store/user';
    import { onMounted, ref } from 'vue';
    import { User } from '@/api/user/user';
    import { edit } from '@/api/user/api';
    import { UploadFile } from 'element-plus';
    import { upload } from '@/api/file/api';
    import { FileType, UploadType } from '@/api/file/file';

    const userInfo = useUserStore();
    const url = ref();
    onMounted(() => {
        load();
    });
    const user = ref<User>({
        id: '',
        userEmail: '',
        userName: ''
    });

    function load() {
        user.value.id = userInfo.id as string;
        user.value.userName = userInfo.userName as string;
        user.value.userEmail = userInfo.userEmail as string;
        url.value = userInfo.avatar;
        user.value.career = userInfo.career;
        user.value.remark = userInfo.remark;
    }

    async function editUser() {
        let cover;
        if (file) {
            let { data } = await upload({
                uploadType: UploadType.LOCAL,
                fileType: FileType.OTHER,
                multipartFiles: [file]
            });
            cover = data.fileIds[0];
        }
        if (cover) user.value.avatar = cover;
        await edit(user.value);
        await userInfo.getUserInfo();
        load();
    }

    //头像
    let file: Blob;
    function uploadCover(uploadFile: UploadFile) {
        file = uploadFile.raw as Blob;
        //不依赖后端文件回显
        url.value = URL.createObjectURL(file);
    }
</script>

<style scoped lang="scss">
    .top {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        border-bottom: 1px solid rgb(225, 225, 225);
        line-height: 60px;
        font-weight: bold;
        font-size: 18px;
    }
    .profile {
        padding-left: 20px;
        margin-top: 20px;
        display: flex;
        .title {
            padding-bottom: 20px;
        }
        .form-user {
            width: 500px;
        }
        .avatar {
            width: calc(100% - 500px);
            text-align: center;

            .avatar-uploader .avatar {
                width: 88px;
                height: 88px;
            }

            .avatar-uploader {
                margin: 0 auto;
            }
            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 88px;
                height: 88px;
                text-align: center;
                border: 1px dashed black;
                border-radius: 50%;
            }
            .description {
                font-size: 13px;
                padding: 5px;
                color: #8c939d;
            }
            .black {
                color: black;
                margin: 5px 0;
            }
        }
    }
</style>
